<template>
    <Editor api-key="9yxrg2iw28oapfi7d9ypnjktpq7cr737gpk105u4athvcouu" :init="editConfig" v-model:initial-value="editValue" />
</template>
<script lang="ts" setup>
import { ref, watch, nextTick, onMounted } from "vue";
import Editor from '@tinymce/tinymce-vue';
const emit = defineEmits(["update:value", "save"]);
const props = defineProps({
    height: {
        type: [Number, String],
        default: () => {
            return 500;
        },
    },
    value: {
        type: String,
        default: () => {
            return "";
        },
    },
    width: {
        type: String,
        default: () => {
            return "100%";
        },
    },
    show_save: {
        type: Boolean,
        default: () => {
            return true;
        },
    },
    placeholder: {
        type: String,
        default: () => {
            return "请输入内容";
        },
    },
    // hash模式下打包的路径
    production_url: {
        type: String,
        default: () => {
            return ""
        }
    },
    // 菜单配置
    plugins: {
        type: Array,
        default: () => {
            return [
                'anchor', 'autolink', 'charmap', 'codesample', 'emoticons', 'image', 'link', 'lists', 'media', 'searchreplace', 'table', 'visualblocks', 'wordcount',
                'checklist', 'mediaembed', 'casechange', 'export', 'formatpainter', 'pageembed', 'a11ychecker', 'tinymcespellchecker', 'permanentpen', 'powerpaste', 'advtable', 'advcode', 'editimage', 'advtemplate', 'mentions', 'tinycomments', 'tableofcontents', 'footnotes', 'mergetags', 'autocorrect', 'typography', 'inlinecss', 'markdown', 'help' , 'save',
            ]
        }
    },
    // 快捷键配置
    toolbar: {
        type: String,
        default: () => {
            return ' undo redo save | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table mergetags | addcomment showcomments | spellcheckdialog a11ycheck typography | align lineheight | checklist numlist bullist indent outdent | emoticons charmap | removeformat'
        }
    }
})

const editConfig = ref({
    toolbar_mode: 'sliding',
    skin_url: '/tinymce/skins/ui/tinymce-5',
    language_url: '/tinymce/langs/zh_CN.js',
    language: 'zh_CN',
    plugins: props.plugins,
    toolbar: props.toolbar,
    branding: true, // 去水印
    height: props.height || 500, //编辑器高度
    tinycomments_mode: 'embedded',
    tinycomments_author: 'Author name',
    file_picker_types: "image",
    images_upload_credentials: true,
    placeholder: props.placeholder,
    autosave_interval: "20s",
    font_family_formats:
        "微软雅黑=Microsoft YaHei,Helvetica Neue;PingFang SC;sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun;serifsans-serif;Terminal=terminal;monaco;Times New Roman=times new roman;times", //字体
    mergetags_list: [
        { value: 'First.Name', title: 'First Name' },
        { value: 'Email', title: 'Email' },
    ],
    images_upload_handler : function (blobInfo: any, success: any, failure: any) {
        let formData = new FormData();
        formData.append("file", blobInfo.blob());
        // 需要自行修改上传api
    },
    save_onsavecallback: function () {
        save();
    },
    init_instance_callback: (editor: any) => {
        editor.on("change", () => {
            if(is_save_now.value) {
                save();
            }
        })
    }
});
const editValue = ref("");
const is_save_now = ref(true); //是否实时保存
const showEdit = ref(false);


const save = () => {
    editValue.value = editValue.value.replace(/'/g, "&#39;");
    emit("update:value", editValue.value);
    emit("save", editValue.value);
}

watch(() => props.value, (newValue) => {
    editValue.value = newValue ? newValue : "";
}, {
    immediate: true,
    deep: true,
})

watch(() => props.toolbar, () => {
    // initEditor();
})
</script>
<style lang="scss" scoped></style>